<template>
	<view v-if="isRender">
		<view class="form-box">
			<u-form labelPosition="top" labelStyle="color:#ffffff" :labelWidth="200" :model="formData">
				<u-form-item :label="getStr('combineCards.selectCards')" prop="selectCards">
					<u-input v-model="formData.cardType.cardType" :placeholder="getStr('combineCards.selectCards.placeholder')"
						color="#ffffff" placeholderStyle="color:#666666" border="none">
						<template #suffix>
							<view>
								<image @click="appCardTypeShow = true" src="/static/images1/index/select-icon.png"
									style="width: 24rpx; height: 24rpx;"></image>
							</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="getStr('combineCards.inflationRate')" prop="inflationRate">
					<u-input v-model="formData.inflationRate" color="#ffffff" placeholderStyle="color:#666666"
						border="none"></u-input>
				</u-form-item>
				<u-form-item :label="getStr('combineCards.issuePrice')" prop="releaseAmount">
					<u-input v-model="formData.releaseAmount" :placeholder="getStr('combineCards.issuePrice.placeholder')"
						color="#ffffff" placeholderStyle="color:#666666" border="none" @change="compoundCalculateFn"></u-input>
				</u-form-item>
				<u-form-item :label="getStr('combineCards.discountPrice')" prop="discountAmount">
					<u-input v-model="formData.discountAmount" color="#ffffff" placeholderStyle="color:#666666"
						border="none"></u-input>
				</u-form-item>
				<u-form-item :label="getStr('combineCards.combineCards')" prop="combineCards">
					<u-input v-model="formData.combineCards" :placeholder="getStr('combineCards.combineCards.placeholder')"
						color="#ffffff" :disabled="true" disabledColor="#262930" placeholderStyle="color:#666666"
						border="none"></u-input>
				</u-form-item>
			</u-form>
			<view style="margin-top: 0;">
				<sysButton :text="getStr('confirm')" :handleChange="compoundFn"></sysButton>
			</view>
		</view>

		<view class="action-sheet-box">
			<up-action-sheet :actions="appCardTypeList" :title="getStr('sheet.title.selectCard')" :show="appCardTypeShow"
				@select="handleSelectCard" @close="appCardTypeShow = false"></up-action-sheet>
		</view>
	</view>
</template>

<script setup>
	import sysButton from '@/components/sysButton/index.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getAppCardTypeList,
		compoundCalculate,
		compound
	} from '@/common/api/common.js'

	const isRender = ref(true)

	const phoneLogin = () => {}

	const tips = ref('Seed');
	const uCodeRef = ref(null)
	const formData = reactive({
		cardType: {
			cardType: ''
		},
		inflationRate: '',
		releaseAmount: '',
		discountAmount: '',
		combineCards: uni.$t('combineCards.combineCards.combineCardsTit'),

		// email: '',
		// code: '',
		// inviteCode: ''
	})
	const loading = ref(false)

	const appCardTypeShow = ref(false)

	const appCardTypeList = ref([])

	const handleSelectCard = (e) => {
		console.log(e)
		formData.cardType = e
		formData.inflationRate = e.cardGrowthRate * 100 + '%'
	}

	const compoundCalculateFn = async (e) => {
		const res = await compoundCalculate({
			telegramId: uni.getStorageSync('telegramId'),
			releaseAmount: e
		})
		if (res.code == 200) {
			formData.discountAmount = res.data.needStarNumber
		}
	}

	const compoundFn = async () => {
		const res = await compound({
			telegramId: uni.getStorageSync('telegramId'),
			cardTypeId: formData.cardType.id,
			releaseAmount: formData.releaseAmount,
			discountAmount: formData.discountAmount
		})
		if (res.code == 200) {
			uni.$u.toast(getStr('toast.successfully'))
			uni.navigateTo({
				url:'/pages/my/myBag/index'
			})
		} else {
			uni.$u.toast(res.message)
		}
	}

	const getAppCardTypeListFn = async () => {
		const res = await getAppCardTypeList()
		if (res.code == 200) {
			appCardTypeList.value = res.data.map(item => {
				return {
					...item,
					name: item.cardType
				}
			})
		}
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	onLoad(() => {
		getAppCardTypeListFn()
	})
	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
</script>

<style>
	page {
		background: #1C1E23;
	}
</style>

<style lang="scss" scoped>
	.form-box {
		width: calc(100vw - 28rpx - 28rpx);
		padding-top: 28rpx;
		margin: 0 auto;

		::v-deep .u-form-item {
			margin-bottom: 20rpx;

			text {}
		}

		::v-deep .u-form-item__body__left {
			margin-bottom: 24rpx;
		}

		::v-deep .u-form-item {
			margin-bottom: 0;
		}

		::v-deep .u-form-item__body {
			padding: 0 0 50rpx;
		}

		::v-deep .u-input {
			background-color: #262930;
			height: 88rpx;
			padding: 0 18rpx 0 28rpx !important;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		.verify-code {
			::v-deep .u-button {
				height: 54rpx;
			}
		}
	}

	.action-sheet-box {
		::v-deep .u-popup__content {
			background-color: #1C1E23;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		}

		::v-deep .u-action-sheet--hover {
			background-color: #1C1E23;
		}

		::v-deep .u-action-sheet__header__title {
			color: #fff;
		}

		::v-deep .u-action-sheet__item-wrap__item__name {
			color: #fff;
		}
	}
</style>